<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@include file="/WEB-INF/webpage/common/taglibs.jspf" %>
<!DOCTYPE html>
<html>
<head>
	<title>统计查询</title>
	<meta name="decorator" content="list"/>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<html:css name="iCheck,Validform,jquery-ztree,easy-ui"/>
	<html:js name="iCheck,Validform,jquery-ztree,easy-ui,public-js,common-custom,activiti-js"/>
	<%-- <script src="${staticPath}/vendors/echarts/echarts.min.js"></script>--%>
	<script src="${staticPath}/project/js/echarts.min.js"></script>
	<script type="text/javascript" src="${staticPath}/project/laydate-v5.0.9/laydate.js"></script>
	<style type="text/css">
		.custom-warp {
			width: 100vw;
			height: 600vh;
			display: flex;
			flex-wrap: wrap;
			text-align: center;
			background-color: #354e69;
		}
		
		.form-inline{
			background-color: #354e69;
		}
		
		.form-group{
			color: #fff;		
		}
		
		.form-control{
			background-color: #222C44;
		}
		
		.table-hover>tbody>tr:hover {
		    color: #337ab7!important;
		}
				
		.bootstrap-table .table{
			color: #fff;	
		}
		
		.bootstrap-table .table thead>tr>th{
				background-color: #263856;
		}

		.custom-warp > .box {
			width: 100%;
			height: 10%;
			border-top: 0.5px solid #36f0ff;
			display: flex;
			flex-direction: column;
		}
		
		.custom-warp > .boxlist {
			width: 98%;
			height: 90%;
			margin: auto;
		}
		.table td, .table th {
			text-align:center;
		}
		.custom-warp>.box>.chart-head{
			height: 100px;
			display: flex;
			flex-direction: row-reverse;
		}
		.custom-warp>.box>.chart-head>.head-box{
			flex: 1;
			font-size: 18px;
			font-weight: bold;
		}
		.custom-warp>.box>.chart-head>.head-box .head-box-num{
			font-size: 30px;
			color: red;
		}
		.custom-warp>.box>.head-echarts{
			flex: 1;
		}
		
		.hidden{
			display:None;
		}
		
		


		/*.head-echarts {*/
		/*width: 100%;*/
		/*height: 80%;*/
		/*}*/

		/*.head-box {*/
		/*width: 50%;*/
		/*float: right;*/
		/*font-size: 18px;*/
		/*font-weight: bold;*/
		/*margin-top: 20px;*/
		/*margin-bottom: 30px;*/
		/*}*/

		/*.head-box-num {*/
		/*font-size: 30px;*/
		/*color: red;*/
		/*}*/
	</style>
	<script type="text/javascript" src="${staticPath}/common/js/curdtools_jqgrid_extend.js"></script>
	<script type="text/javascript" src="${staticPath}/modules/activiti/js/workflow.js"></script>
	<script type="text/javascript" src="${staticPath}/modules/activiti/js/workflow.js"></script>
	<link href="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet">
	<script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>
</head>
<body>
<div id="app">
<div class="form-inline" style="padding: 10px;">
 	<div class="form-group">
          <label class="control-label">请选择排序期间  ：&nbsp;&nbsp; </label>
          <select id="checkperiod" name="period" class="form-control">           
            <option value="本月">本月</option>
            <option value="开累">开累</option>
         </select>
     </div>

 	<div class="form-group">
          <label class="control-label">请选择排序方式  ：&nbsp;&nbsp; </label>
          <select id="checktype" name="type" class="form-control">           
            <option value="管理利润">管理利润</option>
            <option value="实际利润">实际利润</option>
            <option value="管理利润率">管理利润率</option>
         </select>
     </div>
	&nbsp;&nbsp;&nbsp;&nbsp;
	     <div class="form-group">
	 	     <button class="btn btn-sm btn-fa-file-excel-o" onclick="checkchange()">
				<i class="fa fa-check-square"></i> 
				排    序
			</button>
		</div>
	</div>

<div class="custom-warp">
    <div class="box" id="gllr"></div>
    <div class="boxlist" id="">
		<table class="table table-bordered" data-toggle="table">
			<thead>
			  <tr>
			  	<th >排名</th>
			    <th >项目名称</th>
			    <th >期间</th>
			    <th >计划产值(万元)</th>
			    <th >完成产值(万元)</th>
			    <th >责任成本(万元)</th>
			    <th >实际成本(万元)</th>
			    <th >经营利润(万元)</th>
			    <th >管理利润(万元)</th>
			    <th >实际利润(万元)</th>
			    <th >产值毛利率</th>
			  </tr>
			  
			</thead>
			<tbody id="listbody">
			  <tr class="hidden">
			    <th scope="row">1</th>
			    <td>aa</td>
			    <td>aa</td>
			    <td>aa</td>
			    <td>aa</td>
			    <td>aa</td>
			    <td>aa</td>
			    <td>aa</td>
			    <td>aa</td>
			    <td>aa</td>
			    <td>aa</td>
			  </tr>
			</tbody>
    	</table>	
	</div>
</div>
</div>
<script>
var baseUrl = "${adminPath}/test/singletable/";
var sortName = "";
$(function () {
    getMainEcharts();
    sortName = $("#checktype").val() + "排序表";
});

function getMainEcharts() {
	debugger;
	$("#checkperiod").val("本月");
	$("#checktype").val("管理利润");
	var temp = "${orgLong}";
    var url = baseUrl + "getMainEcharts?orgNum="+temp+"&type=2&periodSelect=by&typeSelect=gllr";
    $.ajax({
        url: url,
        type: 'get',
        success: function (map) {
            if (map) {
            	gllrFun(map.list,"6");
            	getlist(map.list);
            }
        }
    });
}

function checkchange(){
	debugger;
	var selectperiod = $("#checkperiod").val();
	var selecttype = $("#checktype").val();
	var periodsplit = "";
	var typesplit = "";
	var typeNum = "";
	if(selectperiod == "本月"){
		periodsplit = "by";
	}else if(selectperiod == "开累"){
		periodsplit = "kl";
	}
	
	if(selecttype == "管理利润"){
		typesplit = "gllr";
		typeNum = "6";
	}else if(selecttype == "实际利润"){
		typesplit = "sjlr";
		typeNum = "7";
	}else if(selecttype == "管理利润率"){
		typesplit = "czmll";
		typeNum = "8";
	}
	sortName = $("#checktype").val() + "排序表";
	var temp = "${orgLong}";
	var url = baseUrl + "getMainEcharts?orgNum="+temp+"&type=2&periodSelect="+periodsplit+"&typeSelect="+typesplit+"";
	$.ajax({
        url: url,
        type: 'get',
        success: function (map) {
            if (map) {
            	gllrFun(map.list,typeNum);
            	getlist(map.list);
            }
        }
    });
}


//
function gllrFun(data,typeNum) {
    var xData = [];
    var yData1 = [];
    var yData2 = [];
    var yData3 = [];
    var matterStr = "{b0}<br/>本月:{c0}万元<br/>本年:{c1}万元<br/>开累:{c2}万元";
    var yStr = "金额(万元)";
    if (data) {
        for (var i = 0; i < data.length; i++) {
            if (data[i]) {
                xData.push(data[i].name);
                if(typeNum == "6"){
                	yData1.push(data[i].by6);
                    yData2.push(data[i].bn6);
                    yData3.push(data[i].kl6);
                }else if(typeNum == "7"){
                	yData1.push(data[i].by7);
                    yData2.push(data[i].bn7);
                    yData3.push(data[i].kl7);
                }else if(typeNum == "8"){
                	yData1.push(data[i].by8);
                    yData2.push(data[i].bn8);
                    yData3.push(data[i].kl8);
                    matterStr = "{b0}<br/>本月:{c0}<br/>本年:{c1}<br/>开累:{c2}";
                    yStr = "百分比"
                }
                
            }
        }
    }
    debugger;
    var gllrOptions = {
    		textStyle: {
    			color: '#FFF' ,
    		},
    		color:['#06c9e1','#e48841','#68bbf0'],
            title: {
                text: sortName,
                left: 'center',
                top: '10px',
                textStyle:{
                	color: '#FFF' ,
                }
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                },
                formatter: matterStr
            },
            grid: {
           	 bottom: '20%'
           	},
            legend: {
            	show: true,
                bottom: '0',
                data: ['本月', '本年', '开累'],
                textStyle:{
                	color: '#FFF' ,
                }
            },
            xAxis: {
                type: 'category',
                data: xData,
                axisLabel: {
                    interval: 0,
                    rotate: 20,
                    textStyle: {  
                        fontSize : 11
                      }
                },
                axisLine:{
                    lineStyle:{
                        color:'#fff'
                    }
                }
            },
            yAxis:{
                type: 'value',
                name: yStr,
                axisLine:{
                    lineStyle:{
                        color:'#fff'
                    }
                }
            },
            series: [{
            	name: '本月',
                data: yData1,
                barWidth: '8px',
                type: 'bar'
            },{
            	name: '本年',
                data: yData2,
                barWidth: '8px',
                type: 'bar'
            },{
            	name: '开累',
                data: yData3,
                barWidth: '8px',
                type: 'bar'
            }]
        };
        var gllr = document.getElementById('gllr');
        var gllrChart = echarts.init(gllr);
        gllrChart.setOption(gllrOptions);
}

//获取列表信息
function getlist(data){
	
	var str = "";
	if (data) {
        for (var i = 0; i < data.length; i++) {
            if (data[i]) {
                str += "<tr>";
                str += "<td rowspan='3'>"+(i+1)+"</td>";
                str += "<td rowspan='3' value='"+data[i].orgLong+"'>"+data[i].name+"</td>";
                str += "<td>本月</td>";
                str += "<td>"+data[i].by1+"</td>";
                str += "<td>"+data[i].by2+"</td>";
                str += "<td>"+data[i].by3+"</td>";
                str += "<td>"+data[i].by4+"</td>";
                str += "<td>"+data[i].by5+"</td>";
                str += "<td>"+data[i].by6+"</td>";
                str += "<td>"+data[i].by7+"</td>";
                str += "<td>"+data[i].by8+"</td>";
                str += "</tr>";
                str += "<tr>";
                str += "<td>本年</td>";
                str += "<td>"+data[i].bn1+"</td>";
                str += "<td>"+data[i].bn2+"</td>";
                str += "<td>"+data[i].bn3+"</td>";
                str += "<td>"+data[i].bn4+"</td>";
                str += "<td>"+data[i].bn5+"</td>";
                str += "<td>"+data[i].bn6+"</td>";
                str += "<td>"+data[i].bn7+"</td>";
                str += "<td>"+data[i].bn8+"</td>";
                str += "</tr>";
                str += "<tr>";
                str += "<td>开累</td>";
                str += "<td>"+data[i].kl1+"</td>";
                str += "<td>"+data[i].kl2+"</td>";
                str += "<td>"+data[i].kl3+"</td>";
                str += "<td>"+data[i].kl4+"</td>";
                str += "<td>"+data[i].kl5+"</td>";
                str += "<td>"+data[i].kl6+"</td>";
                str += "<td>"+data[i].kl7+"</td>";
                str += "<td>"+data[i].kl8+"</td>";
                str += "</tr>";
            }
        }
    }
	$("#listbody").html("");
	$("#listbody").append(str);
	
	
}


function toProjectList(orgLong){
	var width = "1400px";
	var height = "800px";
	var url = baseUrl+'toProjectList?orgLong='+ orgLong;
	if(navigator.userAgent.match(/(iPhone|iPod|Android|ios)/i)){//如果是移动端，就使用自适应大小弹窗
		width='auto';
		height='auto';
	}else{//如果是PC端，根据用户设置的width和height显示。
	
	}
	layer.open({
	    type: 2,  
	    area: [width, height],
	    title: "酒店月度总收入统计",
        maxmin: true, //开启最大化最小化按钮
	    content: url
	});
	}
    
</script>
</body>
</html>